<template>
  <swmodal :isShow="isShow" :isShowBg="true" :bgColor="'transparent'" class="swLoading">
    <div class="loading"> 
      <img class="logoText" src="../../assets/images/logo.png">
    </div>
  </swmodal>
</template>

<script type="text/javascript">
import swmodal from './index.vue'

export default {
  name: 'sw-loading',
  data () {
    return {
      isShow: true,
      reopenTimer: null
    }
  },
  mounted () {
  },
  components: {
    swmodal
  },
  methods: {
    // 如果reopen和close几乎同时进行，则会被reopen里的settimeout里的this.isShow = true覆盖，导致关闭不了，所以要清除定时器reopenTimer
    close () {
      this.reopenTimer && clearTimeout(this.reopenTimer)
      this.isShow = false
    },
    reopen (needAnim) {
      this.needAnim = false
      this.isShow = false
      this.reopenTimer = setTimeout(() => {
        if (needAnim) {
          this.needAnim = true
        } else {
          this.needAnim = false
        }
        this.isShow = true
      }, 30)
    }
  }
}
</script>

<style lang="less">
.swLoading {

  .modal {
    box-shadow: none;
  }

  img.logoIcon {
    vertical-align: middle;
    height: 36px;
    animation: loopRotate 2s infinite linear;
  }

  img.logoText {
    position: relative;
    top: 2px;
    vertical-align: middle;
    margin-left: 4px;
    height: 30px;
  }

  @keyframes loopRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>
